body {
    height: 3000px;
    background: url("../2af1250cfe5405d4-ec01e1cf6a4db881-bdaba1fe07130d8c3fac48d097270d59.jpg") no-repeat center;
    background-size: cover;
    perspective: 2000px;
}

h2 {
    width: 0;
    height: 50px;
    margin: auto;
    overflow: hidden;
    color: chocolate;
    font-size: 40px;
    font-weight: 700;
    font-family: STXinwei;
    text-shadow: 2px 2px 2px #000;
    animation: over 8s infinite steps(15);
}

@keyframes over {
    from {
        width: 0;
    }
    to {
        width: 680px;
    }
}

h3 {
    width: 100%;
    height: 80px;
    text-align: center;
    text-shadow: 2px 2px 2px #000;
    color: chocolate;
    font-size: 50px;
    z-index: 3;
}

.box {
    width: 100%;
    height: 800px;
}

.box ul li {
    position: absolute;
    width: 180px;
    height: 200px;
    /* transform-origin: right ; */
    background-size: cover;
    border: 2px solid #fff;
    box-sizing: content-box;
    z-index: 1;
    transition: all 1s;
}

.tu1 {
    position: absolute;
    left: 80px;
    top: 200px;
    background: url("../微信图片_20180805165410.jpg") no-repeat;
    transform: rotate(40deg);
}

.tu2 {
    position: absolute;
    left: 180px;
    top: 400px;
    background: url("../微信图片_20180805170306.jpg") no-repeat;
    transform: rotate(65deg);
}

.tu3 {
    position: absolute;
    left: 480px;
    top: 400px;
    background: url("../微信图片_20180805170318.jpg") no-repeat;
    transform: rotate(-360deg);
}

.tu4 {
    position: absolute;
    left: 900px;
    top: 400px;
    background: url("../微信图片_20180805170322.jpg") no-repeat;
    transform: rotate(-90deg);
}

.tu5 {
    position: absolute;
    left: 580px;
    top: 300px;
    background: url("../微信图片_20180805170329.jpg") no-repeat;
    transform: rotate(-180deg);
}

.tu6 {
    position: absolute;
    left: 780px;
    top: 200px;
    background: url("../微信图片_20180805170336.jpg") no-repeat;
    transform: rotate(-45deg);
}

.tu7 {
    position: absolute;
    left: 900px;
    top: 300px;
    background: url("../微信图片_20180805170340.jpg") no-repeat;
    transform: rotate(45deg);
}

.tu8 {
    position: absolute;
    left: 880px;
    top: 600px;
    background: url("../微信图片_20180805170345.jpg") no-repeat;
    transform: rotate(30deg);
}

.tu9 {
    position: absolute;
    left: 280px;
    top: 400px;
    background: url("../微信图片_20180805170355.jpg") no-repeat;
    transform: rotate(65deg);
}

.tu10 {
    position: absolute;
    left: 200px;
    top: 200px;
    background: url("../微信图片_20180805170404.jpg") no-repeat;
    transform: rotate(80deg);
}

.box ul li:hover {
    transform: none;
    z-index: 200;
}

.box1 {
    position: relative;
    height: 500px;
    width: 100%;
}

.box1 ul li {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    transform-origin: -60px -60px;
    width: 180px;
    height: 200px;
    background-size: cover;
    transition: all 2s;
}

.x-1 {
    background: url("../1.jpg") no-repeat;
}

.x-2 {
    background: url("../2.jpg") no-repeat;
}

.x-3 {
    background: url("../3.jpg") no-repeat;
}

.x-4 {
    background: url("../4.jpg") no-repeat;
}

.x-5 {
    background: url("../5.jpg") no-repeat;
}

.box1:hover .x-2 {
    transform: rotate(-60deg);
}

.box1:hover .x-3 {
    transform: rotate(-120deg);
}

.box1:hover .x-4 {
    transform: rotate(-180deg);
}

.box1:hover .x-5 {
    transform: rotate(-240deg);
}

.box2 {
   
    position: relative;
    width: 200px;
    height: 200px;
    margin: 300px auto;
    background: url("../7.jpg") no-repeat;
    background-size: cover;
    margin: 200px auto;
    transform-style: preserve-3d;
    transform: rotateX(10deg);
    animation: cove 10s linear infinite;
    
}
@keyframes cove{
    from{
        transform: rotateY(0deg);
    }
    to{
        transform: rotateY(360deg);
    }
}

.box2 div{
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    border-radius: 20px;
    overflow: hidden;
}
.box2 div img{
    width: 100%;
    height: 100%;
}
.box2 > div:nth-child(1) {
    transform: rotateY(0deg) translateZ(400px) ;
}
.box2> div:nth-child(2) {
    transform:  rotateY(60deg) translateZ(400px);
}
.box2> div:nth-child(3) {
    transform:  rotateY(120deg) translateZ(400px);
}
.box2> div:nth-child(4) {
    transform:  rotateY(180deg) translateZ(400px);
}
.box2> div:nth-child(5) {
    transform:  rotateY(240deg) translateZ(400px);
}
.box2> div:nth-child(6) {
    transform: rotateY(300deg) translateZ(400px) ;
}